<template>
    <div class="common-layout">
        <el-container>
            <el-header class="header-wrap">
                <h3>Sass平台管理系统</h3>
                <p>欢迎登录</p>
            </el-header>
            <el-main>
                <div class="main-wrap">
                    <el-card>
                        <el-tabs v-model="activeName" stretch>
                            <el-tab-pane label="登录" name="login">
                                <div class="login-warp">
                                    <el-form ref="loginRef" :model="loginForm" class="login-form">
                                        <el-form-item label="账号" prop="account">
                                            <el-input v-model="loginForm.account" placeholder="请输入账号"></el-input>
                                        </el-form-item>
                                        <el-form-item label="密码" prop="password">
                                            <el-input v-model="loginForm.password" placeholder="请输入密码"></el-input>
                                        </el-form-item>
                                    </el-form>
                                    <div class="forget-password-warp">
                                        <el-button type="primary" link @click="forgetPwdFunc">忘记密码</el-button>
                                    </div>
                                    <div class="login-button-wrap">
                                        <el-button type="primary" @click="login">登录</el-button>
                                    </div>
                                    <div class="to-reigster-warp">
                                        <span class="tips">还没有账号？</span>
                                        <el-button type="primary" link @click="activeName = 'register'">马上注册</el-button>
                                    </div>
                                </div>
                            </el-tab-pane>
                            <el-tab-pane label="注册" name="register" class="register-form">
                                <el-form ref="registerRef" :model="registerForm" label-width="80" class="register-form"
                                    label-position="left">
                                    <el-form-item label="账号" prop="account">
                                        <el-input v-model="registerForm.account" placeholder="请输入账号"></el-input>
                                    </el-form-item>
                                    <el-form-item label="密码" prop="password">
                                        <el-input v-model="registerForm.password" placeholder="请输入密码"></el-input>
                                    </el-form-item>
                                    <el-form-item label="确认密码" prop="confirmPassword">
                                        <el-input v-model="registerForm.confirmPassword" placeholder="请输入密码"></el-input>
                                    </el-form-item>
                                </el-form>
                                <div class="register-button-wrap">
                                    <el-button type="primary" @click="register">注册</el-button>
                                </div>
                            </el-tab-pane>
                        </el-tabs>
                    </el-card>
                </div>
            </el-main>
            <el-footer class="footer-wrap">
                <span>诚征英才</span>&nbsp;|&nbsp;
                <span>隐私权政策</span>&nbsp;|&nbsp;
                <span>法律声明</span>&nbsp;|&nbsp;
                <span>知识产权</span>
            </el-footer>
        </el-container>
    </div>
    <ForgetPasswordDialog ref="forgetRef"></ForgetPasswordDialog>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router"
import { loginApi, registerApi } from "@/api/login";
import { systemStore } from "@/pinia/system/index.js"
import ForgetPasswordDialog from "./components/forgetPasswordDialog.vue"



const router = useRouter();

const store = systemStore();
interface loginformType {
    account: string
    password: string
}

interface registerFormType {
    account: string
    password: string
    confirmPassword: string
}

const activeName = ref("login");

const loginRef = ref();
const registerRef = ref();

const loginForm: loginformType = reactive({
    account: "",
    password: ""
})

const registerForm: registerFormType = reactive({
    account: "",
    password: "",
    confirmPassword: ""
})
const forgetRef = ref()
const forgetPwdFunc = () => {
    forgetRef.value.open();
}

// 登录
const login = async () => {
    const result = await loginApi("/api/login", { ...loginForm });
    if (result.data.status == 200) {
        ElMessage.success("登录成功");
        localStorage.setItem("token", result.data.token);
        store.getUserInfo("/user/getUserInfo");
        router.push("/menu")
    } else {
        ElMessage.error(result.data.error)
    }
};

// 注册
const register = async () => {
    if (registerForm.password != registerForm.confirmPassword) {
        return ElMessage.error("两次密码输入不一致")
    }

    const result = await registerApi("/api/register", { account: registerForm.account, password: registerForm.password })

    if (result.data.status == 200) {
        ElMessage.success("账号注册成功");
        activeName.value = "login"
    } else {
        ElMessage.error(result.data.message)
    }
}

</script>
<style lang='scss' scoped>
.header-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 1200px;
    margin: auto;
    padding: 0;
}

.el-main {
    height: 600px;
    background: url("@/assets/img/login-background.jpg") no-repeat center;
    background-size: 100% 100%;

    .main-wrap {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        width: 1200px;
        height: 100%;
        margin: auto;

        .el-card {
            width: 300px;
            height: 350px;
        }
    }

    .login-form,
    .register-form {
        margin: 15px auto 0;
    }

    .forget-password-warp {
        text-align: right;
    }

    .login-button-wrap,
    .register-button-wrap {
        margin: 16px 0;

        .el-button {
            width: 100%;
        }
    }

    .to-reigster-warp {
        display: flex;
        justify-content: center;
        font-size: 14px;
    }
}

.footer-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 1200px;
    margin: 12px auto 0;
    font-size: 12px;
    color: #8e8e8e;
}
</style>